<template>
	<el-card class="!border-none" shadow="never">
		<el-page-header :content="pageTitle" @back="$router.back()" />
	</el-card>
	<el-card class="mt-4 !border-none" shadow="never">
		<el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
			<el-form-item label="文章标题：" prop="title">
				<div class="w-80">
					<el-input v-model="formData.title" placeholder="请输入文章标题" clearable />
				</div>
			</el-form-item>
			<el-form-item label="文章栏目：" prop="cate_id">
				<el-cascader
					ref="cateTreeRef"
					:options="cateOptionsData"
					:props="{ multiple: false, checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
					placeholder="请选择文章栏目"
					clearable
					class="w-80"
					v-model="formData.cate_id"
				>
					<template #default="{ data }">
						<span>{{ data.name }}</span>
					</template>
				</el-cascader>
			</el-form-item>
			<el-form-item label="文章封面：" prop="image">
				<div>
					<imageUpload v-model="formData.image" promptText="建议尺寸：400*400" :limit="1" />
				</div>
			</el-form-item>
			<el-form-item label="文章简介：" prop="desc">
				<div class="w-[400px]">
					<el-input
						v-model="formData.desc"
						placeholder="请输入文章简介"
						type="textarea"
						:autosize="{ minRows: 6, maxRows: 4 }"
						show-word-limit
						clearable
					></el-input>
				</div>
			</el-form-item>
			<el-form-item label="文章摘要：" prop="summary">
				<div class="w-[400px]">
					<el-input
						v-model="formData.summary"
						placeholder="请输入文章摘要"
						type="textarea"
						:autosize="{ minRows: 6, maxRows: 4 }"
						show-word-limit
						clearable
					></el-input>
				</div>
			</el-form-item>
			<el-form-item label="作者：" prop="author">
				<div class="w-80">
					<el-input v-model="formData.author" placeholder="请输入作者名称" />
				</div>
			</el-form-item>
			<el-form-item label="文章内容：" prop="content">
				<editor v-model="formData.content" width="750px" placeholder="请输入文章内容" />
			</el-form-item>
			<el-form-item label="排序：" prop="sort">
				<div>
					<el-input-number v-model="formData.sort" :min="0" :max="9999" />
					<div class="el-form-tips">默认为0， 数值越大越排前</div>
				</div>
			</el-form-item>
			<el-form-item label="初始点击量：" prop="click_virtual">
				<div>
					<el-input-number v-model="formData.init_hits" :min="0" />
				</div>
			</el-form-item>
			<el-form-item label="推荐：">
				<el-radio-group v-model="formData.is_recommend">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="状态：">
				<el-radio-group v-model="formData.status">
					<el-radio :label="1">显示</el-radio>
					<el-radio :label="0">隐藏</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
	</el-card>
	<footerSubmit>
		<el-button type="primary" @click="handleSubmit">保存</el-button>
		<el-button @click="router.back()">返回</el-button>
	</footerSubmit>
</template>

<script setup lang="ts" name="cmsArticleEdit">
import { ref, shallowRef, reactive, computed, onMounted } from 'vue';
import type { FormInstance } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import useTagsView from '/@/hooks/useTagsView';
import { articleDetail, articleAdd, articleEdit } from '/@/api/cms/article';
import { cateAll } from '/@/api/cms/cate';

const pageType = ref('add');

const pageTitle = computed(() => {
	return pageType.value == 'add' ? '添加文章' : '编辑文章';
});

const route = useRoute();
const router = useRouter();

const { removeTagsView } = useTagsView();

const formRef = shallowRef<FormInstance>();

const formData = reactive({
	id: 0,
	cate_id: '',
	title: '',
	desc: '',
	summary: '',
	image: '',
	author: '',
	content: '',
	init_hits: '',
	is_recommend: 0,
	status: 1,
	sort: 0,
});

const cateTreeRef = ref(null);

var validateCate = (rule, value, callback) => {
	if (!formData.cate_id) {
		callback(new Error('请选择栏目'));
	} else {
		callback();
	}
};

const rules = reactive({
	title: [{ required: true, message: '请输入文章标题', trigger: ['blur'] }],
	cate_id: [{ required: true, validator: validateCate, trigger: ['blur'] }],
	image: [{ required: true, message: '请选择文章封面', trigger: ['blur'] }],
});

const cateOptionsData = ref([]);

const setOptionsData = async () => {
	cateOptionsData.value = await cateAll();
};

const handleSubmit = async () => {
	await formRef.value?.validate(async (valid: boolean) => {
		if (!valid) return;
		pageType.value == 'add' ? await articleAdd(formData) : await articleEdit(formData);
		removeTagsView();
		router.back();
	});
};

const setFormData = async (id: any) => {
	const data = await articleDetail({
		id: id,
	});

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
};

onMounted(() => {
	if (route.query.id) {
		pageType.value = 'edit';
		setFormData(route.query.id);
	} else {
		pageType.value = 'add';
	}
	setOptionsData();
});
</script>
